<template>
  <div>
    <div v-if="currentValue && currentValue.length > 0" style="margin-bottom: 10px;">
      <ul class="upload-img-list">
        <li v-for="(item,i) in currentValue" :key="i" :class="{'active':i==0}">
          <div class="img-box-wrap">
            <i class="i-remove el-icon-circle-close" title="移除" @click="deleteItem(item)"></i>
            <el-image style="width: 120px; height: 120px" :src="item.url | imageStyle(imageStyleName,imageStyleDelimiter)"></el-image>
            <div v-if="showFirstTips" class="set-first">
              <span v-if="i==0" title="第一张图片默认为标题图">
                <i class="el-icon-circle-check"></i>此为标题图
              </span>
            </div>
          </div>
          <div v-if="currentValue.length!=1" class="set-num">
            <i v-if="i > 0" class="el-icon-arrow-left" title="左移" @click="moveItem(currentValue,i,i-1)"></i>
            <i v-if="i < currentValue.length-1" class="el-icon-arrow-right pull-right" title="右移" @click="moveItem(currentValue,i,i+1)"></i>
          </div>
        </li>
      </ul>
      <span v-if="showFirstTips">* 第一张图片默认为标题图</span>
    </div>

    <file-dialog ref="fileDialog" file-type="image" multiple :allowed-extension="allowedExtension" :file-max-size="10" @save="getSelectedItems"></file-dialog>
    <el-button @click="open()">{{ buttonText }}</el-button>
  </div>
</template>

<script>
import FileDialog from "@/components/ApeSelectors/file-dialog";

export default {
  name: "ApeImageMultipleSelector",
  components: {
    FileDialog
  },
  props: {
    showFirstTips: {
      type: Boolean,
      default: true
    },
    imageStyleName: {
      type: String,
      default: ""
    },
    imageStyleDelimiter: {
      type: String,
      default: "-"
    },
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    buttonText: {
      type: String,
      default: "选择图片"
    }
  },
  data() {
    return {
      allowedExtension: ["jpg", "gif", "png", "jpeg", "bmp"],
      currentValue: this.value
    };
  },
  watch: {
    value(newValue) {
      this.currentValue = newValue;
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit("input", newValue);
      this.$emit("select");
    },
    // 已选图片列表的图片移动位置
    moveItem(arr, nowIndex, newIndex) {
      arr[nowIndex] = arr.splice(newIndex, 1, arr[nowIndex])[0];
      this.setItemDisplayOrder();
    },
    // 从已选图片列表中删除某张图片
    deleteItem(item) {
      const index = this.currentValue.indexOf(item);
      this.currentValue.splice(index, 1);
      this.setItemDisplayOrder();
    },
    // 已选图片列表排序
    setItemDisplayOrder() {
      for (let index = 0; index < this.currentValue.length; index++) {
        this.currentValue[index].display_order = this.currentValue.length - index;
        // 后端已改为display_order越小越靠前 所以display_order从0开始
        // this.currentValue[index].display_order = index;
      }
      this.updateValue(this.currentValue);
    },
    // 打开选择图片和上传图片的Dialog
    open() {
      this.$refs["fileDialog"].open();
    },
    getSelectedItems(selectedItems) {
      if (selectedItems && selectedItems.length > 0) {
        if (this.currentValue !== null) {
          this.currentValue = [...this.currentValue, ...selectedItems];
        } else {
          this.currentValue = selectedItems
        }
        this.setItemDisplayOrder();
      }
    }
  }
};
</script>

<style lang="scss">
.upload-img-list {
  overflow: hidden;
  &:before,
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  padding-top: 10px;
  margin-top: 0;
  li {
    position: relative;
    float: left;
    width: 120px;
    border: 1px solid #eee;
    & + li {
      margin-left: 10px;
    }
    img {
      vertical-align: middle;
      width: 100%;
      max-height: 100%;
    }
  }
  .img-box-wrap {
    position: relative;
    .i-remove {
      position: absolute;
      top: -12px;
      right: -12px;
      color: #f00;
      z-index: 1;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      cursor: pointer;
      font-size: 20px;
    }
    .set-first {
      position: absolute;
      bottom: 0;
      padding: 2px 5px;
      right: 0;
      left: 0;
      z-index: 1;
      background-color: #333333;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.6;
      i {
        margin-right: 5px;
      }
      a {
        display: block;
        color: #ffffff;
      }
    }
  }
  .set-num {
    line-height: normal;
    padding: 7px 10px 5px;
    overflow: hidden;
    i {
      cursor: pointer;
      vertical-align: top;
    }
    .pull-right {
      float: right;
    }
  }
}
</style>
